<template>
	<view class="my-modal">
		<u-popup :value="showPopup" @input="onInput" :mask-close-able="false" mode="center">
			<view class="my-modal-container" :style="{width: width+'rpx'}">
				<view class="title-box">{{title}}
					<view class="close-box" v-if="isClose">
						<u-icon name="close" size="30" @click="onInput(false)"></u-icon>
					</view>
				</view>
				<view class="my-modal-content">
					<text v-if="content">{{content}}</text>
					<slot v-else></slot>
				</view>
				<view class="my-modal-botton" v-if="showBottom">
					<view class="my-modal-botton-left">
						<slot name="left"></slot>
					</view>
					<view class="my-modal-botton-right">
						<view class="my-modal-botton-item" v-if="showCancel">
							<u-button type="default" :custom-style="customStyle" plain size="medium"
								@click="onInput(false)">
								{{cancelText}}
							</u-button>
						</view>
						<view class="my-modal-botton-item" v-if="showConfirm">
							<u-button type="success" :custom-style="customStyle" plain size="medium" @click="onConfirm">
								{{confirmText}}
							</u-button>
						</view>
					</view>

				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "my-modal",
		props: {
			title: {
				type: String,
				default: ""
			},
			content: {
				type: String,
				default: ""
			},
			value: {
				type: Boolean,
				default: false
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			showConfirm: {
				type: Boolean,
				default: true,
			},
			showCancel: {
				type: Boolean,
				default: true
			},
			isClose: {
				type: Boolean,
				default: true
			},
			showBottom: {
				type: Boolean,
				default: true
			},
			width: {
				type: [String, Number],
				default: 700
			}
		},
		data() {
			return {
				showPopup: false,
				customStyle: {
					padding: '0 40rpx'
				}
			};
		},
		watch: {
			value: {
				handler(nVal) {
					this.showPopup = nVal
				},
				immediate: true
			}
		},
		methods: {
			onInput(e) {
				this.showPopup = e
				this.$emit('input', this.showPopup)
			},
			onConfirm() {
				this.$emit('confirm')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.my-modal {
		&-container {
			width: 600rpx;
			border-radius: $uni-border-radius-lg;
			overflow: hidden;
			background-color: #ffffff;

			.title-box {
				height: 80rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				background-color: rgba($color: $u-type-success-light, $alpha: 1);
				position: relative;
				// overflow: hidden;
				border-radius: $uni-border-radius-lg $uni-border-radius-lg 0 0;

				.close-box {
					position: absolute;
					right: $uni-spacing-row-lg - $uni-spacing-row-sm;
					padding: $uni-spacing-row-sm;
					top: 10rpx;
				}
			}
		}

		&-content {
			min-height: 300rpx;
			// padding: $uni-spacing-row-lg;
			padding-bottom: 0;
			font-size: 28rpx;
		}

		&-botton {
			padding: $uni-spacing-row-lg;
			box-sizing: border-box;
			display: flex;
			// justify-content: flex-end;
			justify-content: space-between;

			&-right {
				display: flex;
			}

			&-item {

				// width: 150rpx;
				&+.my-modal-botton-item {
					margin-left: $uni-spacing-row-lg;
				}
			}
		}


	}
</style>
